<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/widgets'

const types = ['info', 'primary', 'success', 'warning', 'danger']
let typeIdx = 0
function nextType(): string {
  return types[typeIdx++ % types.length]
}

const num = ref(1)
const type = ref(nextType())
function inc() {
  num.value += 1
}

function dec() {
  num.value -= 1
}

function changeType() {
  type.value = nextType()
}
</script>
<template>
  <div class="badge-example pane-block">
    <badge :value="num" :max="10" :type="type">
      <div class="with-badge">
        <div>value: {{ num }}</div>
        <div>max: 10</div>
        <div>type: {{ type }}</div>
      </div>
    </badge>
    <badge value="abc" :type="type">
      <div class="with-badge">
        <div>value: "abc"</div>
        <div>type: {{ type }}</div>
      </div>
    </badge>
    <badge :is-dot="true" :type="type">
      <div class="with-badge">
        <div>is-dot</div>
        <div>type: {{ type }}</div>
      </div>
    </badge>
    <button class="button" @click="inc">inc</button>
    <button class="button" @click="dec">dec</button>
    <button class="button" @click="changeType">ChangeType</button>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';

.badge-example {
  display: flex;
  flex-direction: column;
  .with-badge {
    padding: 0.5em 0.75em;
    background-color: $primary;
    color: $text-invert;
    line-height: 1.5em;
    margin-bottom: 1em;
  }
  button {
    margin-top: 1em;
  }
}
</style>
